<template>

	<!--  @touchstart.stop="touchstartHandle" -->
	<view class="out-panel" @touchmove.stop.prevent="touchmoveHandle" @touchend.stop="touchendHandle"
		:style="{height: `${height}px`}" :class="{transition_class:isAutoMove}">
		<view class="panel_content" :class="{search_radius: !isScroll}">
			<slot></slot>
			<!-- 			<scroll-view :scroll-y="isScroll" style="height: 100%;overflow-y: scroll;">
				
			</scroll-view> -->
		</view>
	</view>

</template>

<script>
	export default {
		props: {
			//初始化是否在中间
			isMiddle: {
				type: Boolean,
				default: true
			},
			//距离顶部距离 rpx
			topSpac: {
				type: Number,
				default: 0
			},
			//底部最短高度 rpx
			bottomSpac: {
				type: Number,
				default: 80
			},
			//中间状态高度 rpx
			middleSpace: {
				type: Number,
				default: 0
			},

		},
		mounted() {
			let info = uni.getSystemInfoSync();
			console.log(info.windowHeight);

			this.maxHeight = info.windowHeight - uni.upx2px(this.topSpac);
			this.minHeight = uni.upx2px(this.bottomSpac);
			if (this.middleSpace == 0) {
				this.middleHeight = (this.maxHeight - this.minHeight) / 2 + this.minHeight;
			} else {
				this.middleHeight = uni.upx2px(this.middleSpace);
			}

			if (this.isMiddle) {
				this.height = this.middleHeight;
				let percent = parseInt((this.height - this.minHeight) * 100 / (this.maxHeight - this
					.minHeight));
				this.$emit("movePercentage", {
					percent: percent,
					isMiddle: this.height == this.middleHeight,
					isBottom: this.height == this.minHeight,
					middleHeight: this.middleHeight,
					minHeight: this.minHeight,
					isEnd: true,
				});
			} else {
				this.height = this.minHeight;
			}

		},
		created() {

		},
		data() {
			return {
				height: 280,
				lastY: 0,
				up: true,
				direction_flag: true,
				isScroll: false,
				maxHeight: 1000,
				middleHeight: 380,
				minHeight: 220,
				isAutoMove: false,

			};
		},
		methods: {
			moveToBottom() {
				this.isAutoMove = false;
				this.height = this.minHeight;
				this.isAutoMove = true;
			},
			touchstartHandle(event) {
				this.isAutoMove = false;
				this.lastY = event.touches[0].pageY;
			},
			touchendHandle(event) {
				let isMin = false;
				this.isAutoMove = true;
				let bottomMoveHeight = this.middleHeight - this.minHeight;
				let topMoveHeight = this.maxHeight - this.middleHeight;
				if (this.height >= this.maxHeight) {
					this.height = this.maxHeight;
					this.isScroll = true;
				} else if (this.height > this.middleHeight + bottomMoveHeight / 2) {
					this.height = this.maxHeight;
					this.isScroll = true;
				} else if (this.height > this.middleHeight - topMoveHeight / 2) {
					this.height = this.middleHeight;
					this.isScroll = false;
				} else {
					this.height = this.minHeight;
					this.isScroll = false;
					isMin = true;
				}

				this.direction_flag = true;

				let percent = parseInt((this.height - this.minHeight) * 100 / (this.maxHeight - this
					.minHeight));

				this.$emit("movePercentage", {
					percent: percent,
					isMiddle: this.height == this.middleHeight,
					isBottom: this.height == this.minHeight,
					middleHeight: this.middleHeight,
					minHeight: this.minHeight,
					isEnd: true,
				});
			},
			touchmoveHandle(event) {
				console.log("我的动了");
				let currentY = event.touches[0].pageY;
				let transformHeight = currentY - this.lastY
				this.height = this.height - transformHeight;
				if (this.height > this.maxHeight) {
					this.height = this.maxHeight
				}
				if (this.height < this.minHeight) {
					this.height = this.minHeight
				}
				if (this.direction_flag) {
					this.direction_flag = false
					if (transformHeight > 0) {
						// 下滑
						this.up = false
					} else {
						// 上滑
						this.up = true
					}
				}
				this.lastY = currentY;
				let percent = parseInt((this.height - this.minHeight) * 100 / (this.maxHeight - this
					.minHeight));
				this.$emit("movePercentage", {
					percent: percent,
					isEnd: false
				});
			}
		},

		watch: {
			bottomSpac(newValue) {
				this.minHeight = uni.upx2px(this.bottomSpac);
				this.middleHeight = (this.maxHeight - this.minHeight) / 2 + this.minHeight;
				if (!this.isScroll) {
					this.height = this.minHeight
				}
			}
		},
	}
</script>

<style lang="scss">
	.out-panel {
		z-index: 900;
		position: fixed;
		bottom: 0;
		width: 100%;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: center;
	}

	.panel_content {
		z-index: 999;
		background-color: #ffffff;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: center;
		width: 100%;
		height: 100%;
		flex: 1;
	}

	/* 滚动边框 */
	.search_radius {
		border-radius: 20rpx 20rpx 0 0;
		box-shadow: 0 -8rpx 30rpx rgba(0, 0, 0, 0.1);
	}

	.transition_class {
		transition-property: height;
		transition-duration: 0.3s;
		transition-delay: 0s;
	}

	.panel_bg {
		position: absolute;
		width: 100%;
		height: 100%;
		background-color: rgba($color: #ffffff, $alpha: 1);
	}
</style>